<template>
    <div class="login">
        <div class="warrper">
             <Form ref="formInline" :model="formInline" :rules="ruleInline">
        <FormItem prop="user">
            <Input type="text" v-model="formInline.user" placeholder="Username">
                <Icon type="ios-person-outline" slot="prepend"></Icon>
            </Input>
        </FormItem>
        <FormItem prop="password">
            <Input type="password" v-model="formInline.password" placeholder="Password" />
                <Icon type="ios-lock-outline" slot="prepend"></Icon>
             </Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formInline')" class='button'>登录</Button>
        </FormItem>
    </Form>
        </div>
        
    </div>
</template>
<script>
import { userLogin} from '../api/login.js'
import Router from '../router/index'
export default {
     data () {
            return {
                formInline: {
                    user: '',
                    password: ''
                },
                //验证规则
                ruleInline: {
                    user: [
                        { required: true, message: '请输入账号', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { type: 'string', min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        userLogin({
                            user_name:this.formInline.user,
                            user_pwd:this.formInline.password
                        }).then(result => {
                            console.log(result)
                            // sessionStorage.setItem('userInfo',JSON.stringify(res.data))
                            if(result.code===1){
                                 this.$Message.success('登陆成功!');
                                 Router.push('/About')
                            }else{
                                this.$Message.error('账号或密码有误!');
                            }
                        })
                       
                    } else {
                        this.$Message.error('账号或密码有误!');
                    }
                })
            }
        }
}
</script>
<style scoped lang="scss">
    .login{
        height: 100%;
        background:url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605091731357&di=fdef9eabd04abe69927cd9f6048a34d8&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201504%2F08%2F134942znghbfflgmv8mcll.jpg") ;
        
    }
    .warrper{
        width: 400px;
        border-radius: 6px;
        padding: 60px 20px;
        background: hotpink;
        position: absolute;
        right:10%;
        top:30%;
     
    }
       .button{
        width: 100%;
    }
</style>